<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据表格</title>
    <link rel="stylesheet" href="static/common/layui/css/layui.css">
    <style>
        body{
            padding:20px;
            font-size:18px;
        }
        /*table{width: 100%;}*/
        /*table *{ border: 1px solid #DDD;}*/
    </style>
</head>
<body>
<h3>转换静态表格</h3>
<table lay-filter="mydemo">
    <thead>
        <tr>
            <th lay-data="{field:'id', width:60}">ID</th>
            <th lay-data="{field:'name', width:80,sort:true,edit:true}">姓名</th>
            <th lay-data="{field:'nl', width:150,sort:true,align:'right'}">年龄</th>
        </tr>
    </thead>
    <tr>
        <td>1</td>
        <td>李四</td>
        <td>15</td>
    </tr>
    <tr>
        <td>2</td>
        <td>王五</td>
        <td>18</td>
    </tr>
    <tr>
        <td>3</td>
        <td>张三</td>
        <td>25</td>
    </tr>
    <tr>
        <td>4</td>
        <td>王纳</td>
        <td>45</td>
    </tr>
    <tr>
        <td>5</td>
        <td>李四</td>
        <td>15</td>
    </tr>
</table>
<h3>方法渲染</h3>
<table id="demo" lay-filter="test"></table>
<script src="static/common/layui/layui.js"></script>
<script>
    layui.use(['table'],function(){
        var table = layui.table;
        //转换静态表格
        table.init('mydemo', {
            height: 240 //设置高度
            // ,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
            //支持所有基础参数
        });
        //方法渲染
        table.render({
            elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
            ,height: 240 //容器高度
            ,cols: [[
                {field:'id',title:"ID",width:60},
                {field:'name',title:"姓名",sort:true,width:80,edit:true},
                {field:'nl',title:"年龄",sort:true,width:150,align:'right'}
            ]]
            ,url:'./data.json'
            ,page:true
            ,response: {
                statusName: 'status' //数据状态的字段名称，默认：code
                ,statusCode: 200 //成功的状态码，默认：0
                ,msgName: 'hint' //状态信息的字段名称，默认：msg
                ,countName: 'total' //数据总数的字段名称，默认：count
                ,dataName: 'rows' //数据列表的字段名称，默认：data
            }
            // ,data:[
            //     {id:1,name:"李四",nl:15},
            //     {id:2,name:"王五",nl:18},
            //     {id:3,name:"张三",nl:25},
            //     {id:4,name:"王纳",nl:45},
            //     {id:5,name:"李四",nl:15},
            // ],
        });
    });
</script>
</body>
</html>